<!-- eslint-disable vue/multi-word-component-names -->

<template >
   
    <div id="building">
 
    
        <div class="l-content">
            <h3 id="title" >软件售后管理系统</h3>
        </div> <!--左部分-->
           
   
    <div id="title1">
     <el-form   class="register" :model="form" :rules="rules"  ref="register"> 
        <!-- 加:inline="true" 行内表单-->

         <h3 id="title2">注册账户</h3> 
         <el-form-item label="账号" prop="userName" >
              <el-input v-model="form.userName" placeholder="请输入账号" prefix-icon="el-icon-user" ></el-input>  
              <!-- v-model为数据绑定 placeholder为输入框默认显示-->
         </el-form-item>
 
         <el-form-item label="密码" prop="password" >
             <el-input type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock" ></el-input>
         </el-form-item>
 
  
         <el-form-item label="重复密码" prop="passwordagin" >
             <el-input type="password" v-model="form.passwordagin" placeholder="请重复密码" prefix-icon="el-icon-lock" ></el-input>
         </el-form-item>

         <el-form-item label="姓名" prop="realName"  >
             <el-input  v-model="form.realName" placeholder="请输入真名(选填)" prefix-icon="el-icon-user" ></el-input>
         </el-form-item>

         <el-form-item label="邮箱" prop="email"  >
             <el-input  v-model="form.email" placeholder="请输入邮箱" prefix-icon="el-icon-message" >
                <el-button @click="verifyCode" slot="append" >发送验证码</el-button> 
            </el-input>
         </el-form-item>

         <el-form-item label="请输入验证码" prop="verifyCode" >
                 <el-input v-model="form.verifyCode" placeholder="请输入验证码" prefix-icon="el-icon-search"> 
                 </el-input>  
                 <!-- v-model为数据绑定 placeholder为输入框默认显示-->
         </el-form-item>

         <el-row >
            <el-col :span="12">
            <el-form-item>
                <el-button  type="primary" id="register-1" @click="dialogVisible = true">
                    注册
                </el-button>
                <!-- @click="submit" 绑定点击事件 -->
            </el-form-item>
            </el-col>

            <el-col :span="12">
            <el-form-item>
                <el-button  type="primary"  id="register-2" @click="$router.push('/Login')">返回</el-button>
                <!-- @click="submit" 绑定点击事件 -->
            </el-form-item>
            </el-col>
         </el-row>
            
     </el-form>
    </div>
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        top="20%"
        > 
        <!-- append-to-body出现不会屏幕变暗,top位置下调  -->
        <span>确认注册账号吗</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="register">确 定</el-button>
        </span>
        </el-dialog>
        
        <el-dialog
        title="提示"
        :visible.sync="error"
        width="30%"
        append-to-body
        top="20%"
        ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span>{{ message }}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="error = false">取 消</el-button>
            <el-button type="primary" @click="error = false">确 定</el-button>
        </span>
        </el-dialog>

    </div>
 </template>
 
 
 <script>
 import {getregister} from '../api/login'
 import bcrypt from 'bcryptjs'
 import http from '@/utils/request'
 export default {
   
     data(){
         return{
             message:'',//后端返回的提示信息
             dialogVisible: false,
             error:false,//弹出框显示
             url: '',
             urlList: [],
             timer: null,
             form:{
                 userName:'',
                 password:'',
                 passwordagin:'',
                 realName:'',
                 email:'',
                 verifyCode:'',
             },//数据定义
            
             rules:{
                 userName:[
                     {required:true,trigger:'blur',message:'请输入账号'}
                 ],
                 password:[
                     {required:true,trigger:'blur',message:'请输入密码'}
                 ],
                 passwordagin:[
                     {required:true,trigger:'blur',message:'请重复密码'}//
                 ],
                 realName:[
                     {required:false,trigger:'blur',message:'请输入真实姓名'}//
                 ],
                 email:[
                     {required:true,trigger:'blur',message:'请输入邮箱'}//
                 ],
                 verifyCode:[
                     {required:true,trigger:'blur',message:'请输入验证码'}//
                 ],
             } //数据校验定义,rules:{}为对象变量
         }
         
     },
     methods:{
        //发送验证码
        //发送验证码
        verifyCode(){
            let formData = {
                email: this.form.email
            };
            console.log(formData)
            //给后端发送加上用户名的url
            
            http.get(`/user/getregistercode?${new URLSearchParams(formData).toString()}`)
                .then(response => {
                    console.log(response.data)
                    if(response.data.code ==200){
                        // this.$message.success(response.data.msg);
                        this.message = response.data.msg; 
                        this.error=true;
                    }else{
                        // this.$message.error(response.data.msg);
                        this.message = response.data.msg; 
                        this.error=true;
                    }
                })
                .catch(error => console.error(error));

        },


        //注册
        register() {
            // var salt = bcrypt.genSaltSync(12);    //定义密码加密的计算强度,默认10
            var hash = bcrypt.hashSync(this.form.password, '$2a$12$c2Sr/uy88pQhDkzKhWF4we');    //把自己的密码(this.user.password)带进去,变量hash就是加密后的密码
            
            this.$refs.register.validate((valid) => {
            // 校验通过
            if (valid) {
              if(this.form.password == this.form.passwordagin){
                    getregister({ userName:this.form.userName,
                    password:hash,
                    realName:this.form.realName,
                    email:this.form.email,
                    verifyCode:this.form.verifyCode
                }).then(({ data }) => {
                        console.log(data)
                        if (data.code == 200) {
                            //注册成功提示
                            this.$message.success("注册成功!");
                            // 跳转到登录页
                            this.$router.push('/Login')
                        } 
                         else{
                            this.dialogVisible = false;
                            this.message = data.msg; 
                            this.error=true;
                            // this.$message.error("注册失败");
                        }
                    })
              } else{
                 this.dialogVisible = false;
                 this.message = "两次输入的密码不一致" 
                 this.error=true;
                //  this.$message.error("两次输入的密码不一致");
              }
           } else{
                 this.dialogVisible = false;
                 this.message = "还有未输入的信息" 
                 this.error=true;
                //  this.$message.error("还有未输入的信息");
           }
       })
     },
    
     }
}

 </script>
 
 <!-- scoped属性的作用是将当前标签下的样式私有化，仅对当前组件起作用 -->
 <style scoped> 
 #building{
   background:url("../assets/Loginbackgrand.jpeg");
   width:100%;
   height:100%;
   position:fixed;
   background-size:100% 100%;
   overflow: auto;
 }
 /* 背景图片 */
 
 .register{
     width:  350px;
     margin:80px auto;
     padding: 30px;
     border: 1px solid #eaeaea;
     background-color: #fff;
     /* border-radius: 15px;  圆角 */
     box-shadow: 0 0 25px #cac6c6 ;
     /*阴影  */
     box-sizing: border-box;
     margin-top: 40px;
     
 }
 
 .el-input{
    width: 290px;
    /* display:block; */
    /* height: 40px; */
    border-radius: 7px 0 0 7px;
    /* display: inline-block; */
} /*输入框样式 */

.el-form-item{
    margin-bottom: 5px;
} /*两个item之间的间距 */
#title{
     color: #3e3a3a;
     margin-top: 10px;
     font-size: 45px;

 }
 .l-content{
    text-align: center;
 }
#title1{
     text-align: center;
     
}
#title2{
     color: #000;
     text-align: center;
     margin-bottom: 15px;
     margin-top: 1px;
     font-size: 30px;
}
 
 #register-1{
     margin-left: 0px;
     margin-top: 20px;
     width: 100px;
     
 }
 #register-2{
    margin-left: 45px;
    margin-top: 20px;
    width: 100px;
 }


 </style>
